<!--投诉管理页-->
<template>
  <div style="height: 6vh;background-color:#fff;padding:10px 20px;">
    <span style="line-height:60px;font-size:20px;">投诉管理</span>
  </div>
  <!-- 投诉详情 -->
  <el-dialog :title="dialogTitle" v-model="dialogComplainVisible" style="width:1000px;padding:40px;">
    <el-form label-width="80px" label-position="top">
      <el-row :gutter="30">
        <el-col :span="24">
          <el-form-item label="处理状态">
            <el-select v-model="complain.cstatus" placeholder="请选择处理状态">
              <el-option
                  v-for="item in statusoptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="24">
          <el-form-item label="处理人员">
            <el-input readonly :value="user.username"></el-input>
<!--            <el-select v-model="complain.lname" placeholder="请选择处理人员">
              <el-option
                  v-for="item in user"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              ></el-option>
            </el-select>-->
<!--            <el-button  @click="handleClick" style="width: 100%;color:#b5b8bd;background-color: rgba(0,0,0,0);padding-right: 830px;">选择处理人员</el-button>-->
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="24">
          <el-form-item label="处理结果">
            <el-input placeholder="请输入内容" v-model="complain.cresult"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="saveComplain">保存</el-button>
    </template>
  </el-dialog>
  <!-- 投诉搜索卡片 -->
  <el-card style="margin:20px;height: 70px;">
    <el-form :inline="true">
      <el-form-item label="投诉状态" style="width:290px;">
        <el-select v-model="complain.cstatus" placeholder="请选择投诉状态">
          <el-option
              v-for="item in statusoptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="投诉人" style="width:290px;">
        <el-input placeholder="请输入姓名" style="width:220px;" v-model="complain.lname"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="reset">重置</el-button>
        <el-button type="primary" @click="loadComplain">查询</el-button>
      </el-form-item>
    </el-form>
  </el-card>
  <!-- 投诉列表 -->
  <el-card style="margin:20px;">
    <div style="height: 6vh;background-color:#fff;">
      <span style="line-height:60px;font-size:18px;position:relative;">投诉列表</span>
      <el-button type="primary" style="float: right;margin-right: 20px; position:relative;" @click="operatons" >批量删除</el-button>
    </div>
    <el-table :data="tableData"
              ref="multipleTableRef"
              style="width: 100%"
              @selection-change="handleSelectionChange">
      <el-table-column
          type="selection"
          width="55"
      >
      </el-table-column>
      <el-table-column prop="ctype" label="投诉类型" align="center"/>
      <el-table-column prop="cquestion" label="问题描述" align="center"/>
      <el-table-column prop="cstatus" label="处理状态" align="center" :formatter="formatStatus"/>
      <el-table-column prop="lname" label="投诉人" align="center"/>
      <el-table-column prop="phonenumber" label="手机号码" align="center"/>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="look(scope.row.cid)">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
<!--  处理人员弹窗
  <el-dialog title="选择处理人员" v-model="addBindUserDialogVisible" >
    <el-table :data="user">
      <el-table-column prop="username" label="姓名" align="center"/>
    </el-table>
  </el-dialog>-->

</template>

<script setup>
import {onMounted, ref} from "vue";
import {ElMessage} from "element-plus";
import axios from "axios";
import qs from 'qs';

//获取登录的用户信息
const user = ref(getUser());
//保存投诉列表数据
const tableData=ref([]);
let multipleSelection=ref([]);
let ids=ref([]);
const handleSelectionChange = (val) => {
  /*multipleSelection.value = val
  console.log(multipleSelection.value);*/
  multipleSelection=[];
  val.forEach(item => {
    multipleSelection.push(item.cid);
    console.log(item.cid);
  })
}
const operatons = () => {
  if (Array.isArray(multipleSelection)) {
  multipleSelection.forEach(ids=> {
    //deleteUser({rid})
    axios.post(BASE_URL+'/v1/complain/delete/'+ids).then((response)=>{
      if (response.data.code==2000){
        ElMessage.success('删除成功!');
        loadComplain();
      }else {
        ElMessage.error(response.data.msg);
      }
    })
  })
  multipleSelection=[];
  }else{
    ElMessage.error('请选择要删除的投诉!');
  }
}
const delect = (cid) => {
  axios.post(BASE_URL+'/v1/complain/delete/'+cid).then((response)=>{
    if (response.data.code==2000){
      ElMessage.success('删除成功!');
      loadComplain();
    }else {
      ElMessage.error(response.data.msg);
    }
  })
}

//控制投诉详情页是否显示
const dialogComplainVisible = ref(false);
onMounted(()=>{
  complain.value = {};
  loadComplain();
})
//定义变量控制dialog的标题
const dialogTitle = ref('投诉详情');
const complain = ref({
  cid:'',
  ctype:'',
  cquestion:'',
  clid:'',
  phonenumber:'',
  cstatus:'',
  cresult:'',
  lname:''
})
//投诉处理状态的选项
const statusoptions=[
  {
    value: '0',
    label: '待处理'
  },
  {
    value: '1',
    label: '处理中'
  },
  {
    value: '2',
    label: '已完成'
  }
]
const formatStatus = (row, column, cellValue, index) => {
  switch (cellValue) {
    case '0':
      return '待处理';
    case '1':
      return '处理中';
    case '2':
      return '已完成';
  }
}
const reset = () => {
  complain.value = {};
  loadComplain();
}
//定义加载投诉列表的方法
const loadComplain = () => {
    //有条件则根据条件查,没有条件默认查所有
    let data = qs.stringify(complain.value);
    console.log(data);
    axios.get(BASE_URL+'/v1/complain/select?'+data).then((response)=>{
      if(response.data.code==2000){
        tableData.value = response.data.data;
      }else{
        ElMessage.error(response.data.msg);
      }
    })
    console.log(data);
}

//实现关闭功能
const handleClose = ()=>{
  if (confirm('是否关闭本窗口?')){
    //用户确认关闭后,将弹窗关闭且将表单数据清空
    dialogComplainVisible.value=false;
    complain.value = {};
  }
}
const look = (cid) => {
  console.log(cid)
  dialogComplainVisible.value=true;
  axios.get(BASE_URL + '/v1/complain/select?cid=' + cid).then((response)=>{
    if (response.data.code == 2000){
      complain.value = response.data.data[0];
      console.log(complain.value);
    }else {
      ElMessage.error(response.data.msg);
    }
  })
}
const saveComplain = ()=>{
  let data = qs.stringify(complain.value)
  axios.post(BASE_URL + '/v1/complain/update', data).then((response)=>{
        if (response.data.code == 2000){
          complain.value = {};
          dialogComplainVisible.value = false;
          ElMessage.success('保存成功');
          loadComplain();
        }else {
          ElMessage.error(response.data.msg);
        }
      })
}






</script>